<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
        <label for="sitename">网站名(key)：</label>
        <input type="text" id="sitename" name="sitename" class="text"/>
        <br/>
        <label for="siteurl">网 址(value)：</label>
        <input type="text" id="siteurl" name="siteurl"/>
        <br/>
        <input type="button" onclick="save()" value="新增记录"/>
        <hr/>
        <label for="search_site">输入网站名：</label>
        <input type="text" id="search_site" name="search_site"/>
        <input type="button" onclick="findOne()" value="查找网站"/>
        <p id="find_result"><br/></p>
    </div>
    
    <div id="list">
    </div>
</body>
<script>
    loadAll();

//添加数据    
function save() {
  var sitename = document.getElementById("sitename").value;
  var siteurl= document.getElementById("siteurl").value;
  localStorage.setItem(sitename,siteurl);
  alert("添加成功")
  loadAll();
}
//查询数据    
function findOne() {
  var search_site = document.getElementById("search_site").value;
  var siteurl = localStorage.getItem(search_site);
  var find_result= document.getElementById("find_result");
  find_result.innerHTML= search_site + "的网址是：" + siteurl;
}
//全查询
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
  var list = document.getElementById("list");
  if(localStorage.length>0){
    var result = "<table border='1'>";
    result += "<tr><td>key</td><td>value</td><td>操作</td></tr>";
    for(var i=0;i<localStorage.length;i++){
      var sitename = localStorage.key(i);
      var siteurl = localStorage.getItem(sitename);
      result += "<tr>" +
        "<td>"+sitename+"</td>" +
        "<td>"+siteurl+"</td>" +
        "<td><input type=button value=删除 onclick=del("+"'"+sitename+"'"+") ></td>" +
        "</tr>";
    }
    result += "</table>";
    list.innerHTML = result;
  }else{
    list.innerHTML = "数据为空……";
  }
}

//删除数据   
function del(name) {
  localStorage.removeItem(name);
  alert("删除成功!");
  loadAll();
}
</script>
</html>